<template>
	<view class="box">
		<u-navbar title-color="#FFFFFF" :is-back="false" title="柔美吉正品验真" :background="background">

		</u-navbar>
		<view class="nav">
			<view>
				<view class="tit1">HELLO</view>
				<view class="tit2">尊敬的客户 您好! </view>
			</view>
		</view>
		<view class="desc">
			<view class="scan">
				<view class="intro">请点击下方“扫一扫” </view>
				<view class="intro">扫描柔美吉设备屏幕上的防伪码</view>
				<view class="intro"> 获取产品验真信息</view>
				<view @click="scan" class="btns">
					扫一扫
				</view>

			</view>
			<image class="img" src="https://file.roumeiji.com/img/17.png" mode="widthFix"></image>
			<image class="img" src="https://file.roumeiji.com/img/18.png" mode="widthFix"></image>
			<image class="img" src="https://file.roumeiji.com/img/19.png" mode="widthFix"></image>
		</view>
		<!-- 弹框 -->
		<u-popup :closeable="true" border-radius="30" mode="center" v-model="show">

			<!-- 成功 -->
			<view v-if="info.ok" class="cont">
				<view class="title">验真激活码</view>
				<view class="nums">第<text>{{info.product_verification_count}}</text>次验真</view>
				<view class="code">{{info.activation_code}}</view>
				<view class="detail">
					<view>该产品为<text>正品</text>，有效期4小时 </view>
					<view>请及时在设备屏幕上输入激活使用</view>
				</view>
				<view class="more" @click="detail">
					点击查看验真详情
					<image class="img" src="https://file.roumeiji.com/img/16.png" mode="widthFix"></image>
				</view>
			</view>
			<!-- 失败 -->
			<view v-else class="cont">
				<view class="detail1">
					<view>获取验真激活码<text>失败</text></view>
					<view>
						请检查是否是正品
					</view>
				</view>

				<view class="more1">
					<view>请认准官方渠道购买</view>
					<view>避免造成经济损失</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#252525',
				},
				show: false,
				info: {},
				id:''
			}
		},
		methods: {
			detail() {
				uni.navigateTo({
					url: "/pages/scan/detail?id="+this.id
				})
			},

			sub(info) {
				this.$u.api
					.createEventhistory({
						event_name: '验真',
						event_data:info.activation_code,
						event_result_data: JSON.stringify({
							...info
						}),
						event_result: 200
					})
					.then((res) => {
						this.id = res.id
						console.log(res,77777);
					});
			},
			scan() {

				if (this.vuex_phone) {
					let that = this;
					uni.scanCode({
						scanType: ['qrCode'],
						success: function(res) {
							that.$u.api
								.activation_code_acq({
									qr_code_info: res.result
								})
								.then((res) => {
									that.show = true
									that.info = res
									// console.log(res,88888888);
									that.sub(that.info)

								});

						}
					});
				} else {
					uni.navigateTo({
						url: "/pages/register/index"
					})
				}


			}
		}
	}
</script>

<style scoped lang="scss">
	image {
		display: block;
	}

	.cont {
		width: 591rpx;
		height: 576rpx;
		background: url('https://file.roumeiji.com/img/14.png') no-repeat !important;
		background-size: cover !important;

		.detail1 {
			padding: 139rpx 112rpx 78rpx;

			font-size: 40rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #000000;
			line-height: 58rpx;

			text {
				color: #FF0000;
			}
		}

		.more1 {
			text-align: center;
			height: 67rpx;
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #7A7A7A;
			line-height: 31rpx;
		}

		.more {

			height: 19rpx;
			font-size: 20rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #3C9226;
			line-height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 15rpx;
				height: 15rpx;
				margin-left: 23rpx;
			}
		}

		.title {
			padding: 77rpx 0 36rpx 0;
			height: 38rpx;
			font-size: 40rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #000000;
			line-height: 1;
			text-align: center;
		}

		.nums {
			padding: 36rpx 0 34rpx 0;
			text-align: center;
			height: 23rpx;
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #7A7A7A;
			line-height: 1;

			text {
				color: #FF0000;
			}
		}

		.code {
			text-align: center;

			font-size: 70rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #3E9A31;
			padding-bottom: 41rpx;
			letter-spacing: 7px;

		}

		.detail {
			text-align: center;
			padding-bottom: 72rpx;
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #7A7A7A;
			line-height: 35rpx;

			text {
				color: #FF0000;
			}
		}

	}

	.wrap {
		padding: 14rpx 0;
	}

	.nav {
		display: flex;
		align-items: center;
		width: 100%;
		height: 179rpx;
		background: url('https://file.roumeiji.com/img/13.png') no-repeat;
		background-size: cover !important;
		margin-bottom: 14rpx;

		.img {
			width: 52rpx;
			height: 64rpx;
			margin: 47rpx 29rpx 41rpx 64rpx;
		}

		.tit1 {
			height: 33rpx;
			font-size: 42rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 1;
			padding-left: 67rpx;
			margin-bottom: 24rpx;
		}

		.tit2 {


			height: 27rpx;
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #BFBFBF;
			line-height: 1;
			padding-left: 67rpx;
		}
	}

	.desc {
		padding: 0 26rpx;

		.scan {
			background: #FFFFFF;
			padding: 66rpx 0 61rpx;
			margin-bottom: 14rpx;

			border-radius: 20rpx;
		}

		.intro {
			text-align: center;
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #1A1A1A;
			line-height: 50rpx;
		}

		.btns {
			margin: 40rpx 59rpx 0;
			height: 74rpx;
			background: linear-gradient(90deg, #3C9226, #1F6F0E);
			border-radius: 37rpx;

			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		image {
			width: 100%;
		}
	}
</style>
